<script setup lang="ts">
import { ref, markRaw, onMounted, reactive, onBeforeUnmount } from "vue";
import ReCol from "@/components/ReCol";
import { useDark, randomGradient } from "./utils";
import { ReNormalCountTo } from "@/components/ReCountTo";
import { useRenderFlicker } from "@/components/ReFlicker";
import { latestNewsData } from "./data";
import SdMap from "@/views/map/demo2/index.vue";
import GroupLine from "@iconify-icons/ri/group-line";
import FilePowerPointBoxOutline from "@iconify-icons/mdi/file-powerpoint-box-outline";
import Increase from "@/assets/svg/streamline--graph-arrow-increase-solid.svg?component";
import Decrease from "@/assets/svg/streamline--graph-arrow-decrease-solid.svg?component";
import { getHomeFirstRowValue } from "@/api/home";
import { useRouter } from 'vue-router'
const router = useRouter()
console.log(router, 'router')
defineOptions({
  name: "Welcome"
});
const chartData = ref([
  {
    icon: GroupLine,
    bgColor: "#effaff",
    color: "#41b6ff",
    duration: 2200,
    name: "接入用户", // userCount
    value: 0,
    key: "userCount",
    percent: "+88%",
    data: [] // 平滑折线图数据
  },
  {
    icon: FilePowerPointBoxOutline,
    bgColor: "#fff5f4",
    color: "#e85f33",
    duration: 1600,
    name: "总功率(kW)", // totalP
    key: "totalP",
    value: 0,
    percent: "+70%",
    data: []
  },
  {
    icon: Increase,
    bgColor: "#eff8f4",
    color: "#26ce83",
    duration: 1500,
    name: "总上调容量(kW)", // toalMaxUpCap
    key: "totalMaxUpCap",
    value: 0,
    percent: "+99%",
    data: []
  },
  {
    icon: Decrease,
    bgColor: "#f6f4fe",
    color: "#7846e5",
    duration: 1700,
    name: "总下调容量(kW)", // toalMaxDownCap
    key: "totalMaxDownCap",
    value: 0,
    percent: "+100%",
    // data: [80, 20]
    data: []
  }
]);
const { isDark } = useDark();
const elSroll = ref(null);
let timer = ref(null);
const getRowData = async () => {
  let data = await getHomeFirstRowValue();
  chartData.value.forEach(item => {
    item.value = data[item.key] || 0;
  });
};
const loading = ref(true);
onMounted(async () => {
  setTimeout(() => {
    loading.value = false;
  }, 1000);
  getRowData();
  timer.value = setInterval(() => {
    getRowData();
  }, 1000 * 180);
});
onBeforeUnmount(() => {
  clearInterval(timer.value);
});
const dataTable = reactive({
  data: {
    show: false,
    data: null,
    showData: [
      ["用户名称", ""],
      ["总有功(kw)", ""],
      ["储能系统在线数/总数", ""],
      ["负荷控制终端在线数/总数", ""],
      ["用电设备在线数/总数", ""],
      ["上调节能力(kW)", ""],
      ["下调节能力(kW)", ""]
    ]
  }
});
const dataShow = data => {
  dataTable.data.show = data.show;
  dataTable.data.data = data.data;
  if (data.show) {
    dataTable.data.showData[0][1] = data.data.name;
    dataTable.data.showData[1][1] = data.data.totalP || "";
    dataTable.data.showData[2][1] = `${data.data.storageOnnum || ""} / ${data.data.storageNum || ""}`;
    dataTable.data.showData[3][1] = `${data.data.terminalOnnum || ""} / ${data.data.terminalNum || ""}`;
    dataTable.data.showData[4][1] = `${data.data.equipOnnum || ""} / ${data.data.equipNum || ""}`;
    dataTable.data.showData[5][1] = data.data.totalMaxUpCap || "";
    dataTable.data.showData[6][1] = data.data.totalMaxDownCap || "";
  } else {
    dataTable.data.showData[0][1] = "";
    dataTable.data.showData[1][1] = "";
    dataTable.data.showData[2][1] = `${""} / ${""}`;
    dataTable.data.showData[3][1] = `${""} / ${""}`;
    dataTable.data.showData[4][1] = `${""} / ${""}`;
    dataTable.data.showData[5][1] = ``;
    dataTable.data.showData[6][1] = ``;
  }
};
const tableRowClassName = ({ row, rowIndex }) => {};
const goPath = () => {
  router.push('/app/app-vue3')
}
</script>

<template>
  <div v-loading="loading" class="home-main">
    <el-button @click="goPath" type="primary">vue-app3</el-button>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card) {
  --el-card-border-color: none;

  /* 解决概率进度条宽度 */
  .el-progress--line {
    width: 85%;
  }

  /* 解决概率进度条字体大小 */
  .el-progress-bar__innerText {
    font-size: 15px;
  }

  /* 隐藏 el-scrollbar 滚动条 */
  .el-scrollbar__bar {
    display: none;
  }

  /* el-timeline 每一项上下、左右边距 */
  .el-timeline-item {
    margin: 0 6px;
  }
}

:deep(.el-card__body) {
  width: 100%;
  height: 100%;
}

.home-main {
  flex: 1;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.bottom {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  //height: calc(100% - 144px);
  padding: 20px;
  overflow: hidden;
  //background: #fff;
  border-radius: 10px;
}

:deep(.el-scrollbar__wrap) {
  padding: 0 10px;
}
</style>
